<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/songerInformation.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>

<body>
    <div class="g-all">
        <div class="g-mn4">
            <div class="g-artist">
                <div class="g-artistname">
                    <h2>
                        {{artist.name}}
                    </h2>
                </div>
                <div class="g-cover">
                    <img class="artister" v-bind:src="artist.picUrl" alt="">
                </div>
            </div>
            <div class="liebiao">
                <ul>
                    <li class="lia"><a href="songerSingle.html">热门作品</a></li>
                    <li class="lib"><a href="songerAlbum.html">所有专辑</a></li>
                    <li class="lic"><a href="songerInformation.html">艺人介绍</a></li>
                </ul>
            </div>
        </div>
        <div class="g-mn5">
            <div class="g-mn6">
                <h3>
                    {{songerName}}简介
                </h3>
                <p class="p1">
                    {{songer.briefDesc}}
                </p> 
            </div>
            <div class="g-mn6" v-for="item in songer.introduction">
                <h3>
                    {{item.ti}}
                </h3>
                <p>
                <ul>
                    <li v-for="item1 in item.showTxt">
                        {{item1}}
                    </li>
                </ul>
                </p>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: ".g-all",
            data: {
                songerId: "",
                songerImg: "",
                songerName: "",
                artist: {
                    id: "",
                    picUrl: "",
                    name: "",
                },
                songer: {
                    briefDesc: "",      /*歌手简介*/
                    introduction: [{        /*歌手详细介绍*/
                        ti: "",     /*介绍标题*/
                        txt: "",        /*介绍内容*/
                        showTxt: "",        //展示的介绍内容
                    }],
                },
            },
            methods: {
                get: function () {
                    var that = this;
                    that.artist.id = sessionStorage.getItem("songerId");
                    axios.get(
                        "https://autumnfish.cn/artist/album?id=" + that.artist.id
                    ).then(function (response) {
                        that.artist = response.data.artist;
                        that.artist.picUrl = that.artist.picUrl + "?param=370y300";
                    }, function (err) {

                    });
                    axios.get(
                        "https://autumnfish.cn/artist/desc?id=" + that.artist.id
                    ).then(function (response) {
                        console.log(response);
                        that.songer = response.data;
                        that.splitTxt();
                    }, function (err) {

                    })
                },
                splitTxt: function () {
                    for (var i = 0; i < this.songer.introduction.length; i++) {
                        if (this.songer.introduction[i]) {
                            if (this.songer.introduction[i].txt) {
                                this.songer.introduction[i].showTxt = this.songer.introduction[i].txt.split('\n');
                            }
                        }
                    }
                }
            },
        });
        //页面初始化
        app.get();
    </script>
</body>

</html>